<template>
  <div>
    <div style="margin-top: 15px; width: 450px">
      <el-input placeholder="请姓名/电话" v-model="clm">
        <el-button
          slot="prepend"
          type="primary"
          plain
          icon="el-icon-plus"
          @click="add"
          >新增</el-button
        >
        <el-button
          slot="append"
          type="primary"
          icon="el-icon-search"
          @click="onSubmit"
          >搜索</el-button
        >
      </el-input>
    </div>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="编号" width="180"> </el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
        width="180"
      ></el-table-column>
      <el-table-column prop="fullname" label="真实姓名" width="180">
      </el-table-column>
      <el-table-column prop="telephone" label="手机号码" width="180">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="180"> </el-table-column>
      <el-table-column prop="createtime" label="添加日期" width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加 -->
    <el-dialog
      class="dialog"
      title="新增用户"
      :visible.sync="dialogFormVisible"
      width="1000px"
    >
      <el-form status-icon label-width="50px" class="demo-ruleForm">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="first">
            <el-form
              :rules="rules"
              :model="ruleForm"
              ref="ruleForm"
              style="width: 850px"
            >
              <el-row>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item
                      label="用户名"
                      prop="username"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="ruleForm.username"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item
                      label="真实姓名"
                      prop="fullname"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="ruleForm.fullname"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item label="是否启用" prop="status" :label-width="formLabelWidth">
                      <el-select v-model="ruleForm.status" placeholder="请选择">
                        <el-option label="禁用" value="0"></el-option>
                        <el-option label="可用" value="1"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
                  <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item label="密码" prop="password" :label-width="formLabelWidth">
                      <el-input
                        v-model="ruleForm.password"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item
                      label="手机号"
                      prop="telephone"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="ruleForm.telephone"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item
                      label="邮箱"
                      prop="email"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="ruleForm.email"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <el-form-item
                      label="出生日期"
                      :label-width="formLabelWidth"
                    >
                      <el-date-picker
                        v-model="ruleForm.createtime"
                        type="date"
                        placeholder="选择日期"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addmember">确 定</el-button>
      </div>
    </el-dialog>

    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[10, 20, 50]"
        :page-size="num"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!--编辑或者添加的模态框-->
    <el-dialog title="编辑信息" :visible.sync="dialogVisible" width="60%">
      <div>
        <el-form
          :model="user"
          ref="user"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="编号" prop="id">
            <el-input readonly v-model="user.id"></el-input>
          </el-form-item>
          <el-form-item label="用户名" prop="username">
            <el-input v-model="user.username"></el-input>
          </el-form-item>
          <el-form-item label="真实姓名" prop="fullname">
            <el-input v-model="user.fullname"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="status">
            <el-input v-model="user.password"></el-input>
          </el-form-item>
          <el-form-item label="是否启用" prop="status">
            <el-input v-model="user.status"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="telephone">
            <el-input v-model="user.telephone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="user.email"></el-input>
          </el-form-item>

          <el-form-item label="添加日期" prop="createtime">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="user.createtime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm('user')">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="温馨提示" :visible.sync="visible" width="60%">
      <span>确认要删除{{ user.fullname }}嘛？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="del">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
  
  <script>
export default {
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    handleEdit(index, row) {
      this.dialogVisible = true;
      this.user = Object.assign({}, row);
    },
    handleDelete(index, row) {
      this.visible = true;
      this.user.id = row.id;
      this.user.fullname = row.fullname;
    },
    info() {
      this.axios
        .get("/rear/User/tkpageUser", {
          params: {
            fullname: this.fullname,
            telephone: this.telephone,
            page: this.page,
            num: this.num,
            clm: this.clm,
          },
        })
        .then((req) => {
          this.tableData = req.data.list;
          this.total = req.data.total;
        });
    },

    handleSizeChange(val) {
      this.num = val;
      this.info();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.info();
    },
    onSubmit() {
      this.info();
    },
    add() {
      (this.ruleForm = {
        username: "",
        fullname: "",
        status: "",
        telephone: "",
        password:"",
        email: "",
        createtime: "",
      }),
        (this.dialogFormVisible = true);
    },
    addmember() {
      console.log(this.ruleForm);
      this.axios
        .post("/rear/User/tkaddUser", this.ruleForm)

        .then((res) => {
          if (res.data) {
            this.ruleForm = {}; //添加成功清空
            this.$message.success("添加成功");
            this.dialogFormVisible = false;
            this.info();
          }
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "正在修改中",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.2)",
          });

          this.axios
            .post("/rear/User/tkupdeUser", this.user)
            .then((req) => {
              if (req.data > 0) {
                loading.close();
                this.dialogVisible = false;
                this.info();
              } else {
                loading.close();
              }
            })
            .catch(() => {
              loading.close();
            });
        } else {
          console.log("信息未输入完成");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    del() {
      const loading = this.$loading({
        lock: true,
        text: "正在删除中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.2)",
      });
      this.axios
        .get("/rear/User/tkdelUser", { params: this.user })
        .then((req) => {
          if (req.data > 0) {
            loading.close();
            this.visible = false;
            this.info();
          } else {
            loading.close();
          }
        })
        .catch(() => {
          loading.close();
        });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  data() {
    return {
      activeName: "first",
      ruleForm: {
        username: "",
        fullname: "",
        status: "",
        password:"",
        telephone: "",
        email: "",
        createtime: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        fullname: [
          { required: true, message: "请输入真实姓名", trigger: "blur" },
        ],
        telephone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            min: 3,
            max: 11,
            message: "长度在 3 到 11 个字符",
            trigger: "blur",
          },
        ],
         password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 11,
            message: "长度在 3 到 11 个字符",
            trigger: "blur",
          },
        ]
      },
      visible: false,
      dialogVisible: false,
      dialogFormVisible: false,
      page: 1,
      num: 10,
      total: null,
      tableData: [],
      fullname: " ",
      telephone: null,
      user: {
        id: null,
        username: "",
        fullname: "",
        status: null,
        telephone: null,
        email: null,
        createtime: null,
      },
      formLabelWidth: "120px",
      clm: null,
    };
  },
  created() {
    this.info();
  },
};
</script>